<template>
  <dv-border-box-12 style="padding: 20px" class="msg_content">
    <div class="flex-y flex-space h-full">
      <div class="w100 flex-x">
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_1.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>控制模式<span class="span">:</span></div>
          {{ area123.systemControlMode == 1 ? "远程" : "本地" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_2.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>设备状态<span class="span">:</span></div>
          {{ getStatus || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_3.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>PID号<span class="span">:</span></div>
          {{ area123.meter1RunPidNO || "--" }}
        </div>
      </div>
      <div class="w100 flex-x">
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_4.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>程序号<span class="span">:</span></div>
          {{ area123.meter1RunPgmNO || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_5.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>阶段号<span class="span">:</span></div>
          {{ area123.meter1RunStageNO || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_6.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>总段数<span class="span">:</span></div>
          {{ area123.meter1RunPgmStageCount || "--" }}
        </div>
      </div>
      <div class="w100 flex-x">
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_7.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>阶段剩余时间<span class="span">:</span></div>
          {{ area123.meter1RunStageRemainTime || "--" }}
        </div>
      </div>

      <div class="w100 flex-x">
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_10.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>相电压Ua<span class="span">:</span></div>
          {{ area123.electricUa || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_11.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />

          <div>相电压Ub<span class="span">:</span></div>
          {{ area123.electricUb || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_12.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>相电压Uc<span class="span">:</span></div>
          {{ area123.electricUc || "--" }}
        </div>
      </div>
      <div class="w100 flex-x">
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_13.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>电流Ib<span class="span">:</span></div>
          {{ area123.electricKw || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_14.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>有功功率<span class="span">:</span></div>
          {{ area123.electricKw || "--" }}
        </div>
        <div class="msg_content_item flex-x">
          <img
            src="@/assets/images/shebeiIcon/msg_15.png"
            style="width: 12px; height: 12px; margin-right: 6px"
            alt=""
          />
          <div>功率因数<span class="span">:</span></div>
          {{ area123.electricCos || "--" }}
        </div>
      </div>
    </div>
    <!-- <el-row :gutter="0" type="flex">
      <el-col style="" :span="8" :offset="0">
        控制模式:{{ area123.systemControlMode == "true" ? "远程" : "本地" }}
      </el-col>
      <el-col style="" :span="8" :offset="0"> 设备状态:运行 </el-col>
      <el-col style="" :span="8" :offset="0">
        PID号: {{ area123.meter1RunPidNO || "--" }}
      </el-col>
    </el-row>
    <el-row :gutter="0" type="flex">
      <el-col style="" :span="8" :offset="0">
        程序号: {{ area123.meter1RunPgmNO || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        阶段号: {{ area123.meter1RunStageNO || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        总段数: {{ area123.meter1RunPgmStageCount || "--" }}
      </el-col>
    </el-row>
    <el-row :gutter="0" type="flex">
      <el-col style="" :span="8" :offset="0">
        阶段剩余时间: {{ area123.meter1RunStageRemainTime || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        程序运行时间: {{ area123.pgmRunTime || "--" }}
      </el-col>

    </el-row>
    <el-row :gutter="0" type="flex">
      <el-col style="" :span="8" :offset="0">
        相电压Ua: {{ area123.electricUa || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        相电压Ub: {{ area123.electricUb || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        相电压Uc: {{ area123.electricUc || "--" }}
      </el-col>
    </el-row>
    <el-row :gutter="0" type="flex">
      <el-col style="" :span="8" :offset="0">
        电流Ib: {{ area123.electricUc || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        有功功率:{{ area123.electricKw || "--" }}
      </el-col>
      <el-col style="" :span="8" :offset="0">
        功率因数: {{ area123.electricCos || "--" }}
      </el-col>
    </el-row> -->
  </dv-border-box-12>
</template>

<script>
import { DEVICE_STATE } from "../../workshopOperation/constant";
export default {
  computed: {
    getStatus() {
      return DEVICE_STATE.find(item => item.value == this.area123.value)?.label;
    }
  },
  props: {
    deviceStatus: {
      type: [String, Number],
      default: ""
    },
    area123: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      val: true
    };
  }
};
</script>

<style scoped lang="scss">
.msg_content {
  .msg_content_item {
    width: 33%;
    height: 26px;
    background: linear-gradient(90deg, rgba(4, 14, 83, 0), #1a267c);
    border-radius: 3px;
    // margin-bottom: 10px;
    font-size: 14px;
    padding-left: 20px;
    div {
      margin-right: 2px;
    }
  }
  /deep/ .border-box-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /deep/ .el-row--flex {
    flex-wrap: wrap;
  }
}
.span {
  margin: 0 3px;
}
</style>
